<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <%- include src/pages/common/styles.html -%>

  <title>注册小贷账号</title>
</head>
<body>

  <%- include src/pages/common/header.html -%>

  <div class="content registration">
    
    <div class="palette">
      <h2 class="palette__title">
        注册小贷账号
        <span class="registration__login">
          已有账号<a href="/build/pages/login.html">返回登录</a>
        </span>
      </h2>

      <div class="palette__narrow">
        <div class="linehead">
          <h3>个人信息</h3>
        </div>

        <form class="form-horizontal form__juxtapose">
          <div class="form-group">
            <label class="control-label">
              <span class="form__label form__label--require">姓名</span>
            </label>
            <div class="overflow-hidden">
              <input type="text" class="form-control">
            </div>
          </div>
          <div class="form-group">
            <label class="control-label">
              <span class="form__label form__label--require">职位</span>
            </label>
            <div class="overflow-hidden">
              <input type="text" class="form-control">
            </div>
          </div>
          <div class="form-group">
            <label class="control-label">
              <span class="form__label form__label--require">邮箱</span>
            </label>
            <div class="overflow-hidden">
              <input type="email" class="form-control">
            </div>
          </div>
          <div class="form-group">
            <div class="representative">
              本人为法人 
              <label class="toggle">
                <input type="checkbox" name="isRepresentative" id="isRepresentative" class="J_representative">
                <div class="toggle__switch">
                  <div class="switch__inner">
                    <span class="switch__off">否</span>
                    <span class="switch__handle"></span>
                    <span class="switch__on">是</span>
                  </div>
                </div>
              </label>
            </div>
          </div>
        </form>

      </div>

      <div class="registration__licence J_licence">
        <div class="linehead linehead--transparent">
          <h3>上传身份证读取号码</h3>
          <p class="linehead__sub">
            提示：可支持PNG、JPG、JPEG、BMP，图片大小不超过4M，长边不大于4096像素，请保证需要识别的部分为图片主体部分
          </p>
        </div>
        <div class="licence__inner">
          <div class="licence__item">
            <div class="licence__uploader frontid">
              <h4 class="licence__name">
                法人身份证（正面）
                <a href="#exemplar"
                  data-toggle="modal"
                  class="licence__examplar"
                  data-source="<%= require('images/example-id-front.png') %>"
                >
                  示例图
                </a>
              </h4>
              <div class="uploader__inner">
                <div class="uploader__dimmer">
                  <label class="btn">上传<input type="file"></label>
                </div>
              </div>
            </div>
            <div class="licence__previewer">
              <div class="previewer__card">
                <dl class="previewer__line">
                  <dt class="line__title">姓名</dt>
                  <dd class="line__content">黄XX</dd>
                </dl>
                <dl class="previewer__line">
                  <dt class="line__title">性别</dt>
                  <dd class="line__content">男</dd>
                </dl>
                <dl class="previewer__line">
                  <dt class="line__title">民族</dt>
                  <dd class="line__content">汉</dd>
                </dl>
                <dl class="previewer__line">
                  <dt class="line__title">出生</dt>
                  <dd class="line__content">1987年09月17日</dd>
                </dl>
                <dl class="previewer__line">
                  <dt class="line__title">地址</dt>
                  <dd class="line__content">北京市海淀区西北旺东路100号中关村科技园</dd>
                </dl>
                <dl class="previewer__line">
                  <dt class="line__title">公民身份证号码</dt>
                  <dd class="line__content">111624199211020314</dd>
                </dl>
              </div>
            </div>
          </div>

          <div class="licence__item">
            <div class="licence__uploader uploaded backid">
              <h4 class="licence__name">
                法人身份证（反面）
                <a href="#exemplar"
                  data-toggle="modal"
                  class="licence__examplar"
                  data-source="<%= require('images/example-id-back.png') %>"
                >
                  示例图
                </a>
              </h4>
              <div class="uploader__inner">
                <div class="uploader__dimmer">
                  <label class="btn">上传<input type="file"></label>
                </div>
              </div>
            </div>
            <div class="licence__previewer">
              <div class="previewer__card">
                <dl class="previewer__line">
                  <dt class="line__title">签发机关</dt>
                  <dd class="line__content">深圳公安局</dd>
                </dl>
                <dl class="previewer__line">
                  <dt class="line__title">有效期</dt>
                  <dd class="line__content">2015.10.08-2025.10.08</dd>
                </dl>
              </div>
            </div>
          </div>

          <div class="licence__item licence__item--bottom">
            <div class="licence__uploader uploaded holdingcard">
              <h4 class="licence__name">
                法人手持身份证照片
                <a href="#exemplar"
                  data-toggle="modal"
                  class="licence__examplar"
                  data-source="<%= require('images/example-id.png') %>"
                >
                  示例图
                </a>
              </h4>
              <div class="uploader__inner">
                <div class="uploader__dimmer">
                  <label class="btn">上传<input type="file"></label>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="palette__narrow">
        <div class="linehead">
          <h3>注册信息</h3>
        </div>

        <form class="form-horizontal form__juxtapose">
          <div class="form-group">
            <label for="mobileNumber" class="control-label">
              <span class="form__label form__label--require">手机号码</span>
            </label>
            <div class="overflow-hidden">
              <input type="tel" name="mobileNumber" id="mobileNumber" class="form-control" placeholder="用于登录伟仕小贷">
            </div>
          </div>
          <div class="form-group">
            <label for="picVerifyCode" class="control-label">
              <span class="form__label form__label--require">图形验证码</span>
            </label>
            <div class="pull-left">
              <input type="text" name="picVerifyCode" id="picVerifyCode" class="form-control">
            </div>
            <div class="form-group__addon"></div>
          </div>
          <div class="form-group">
            <label for="mobileVerifyCode" class="control-label">
              <span class="form__label form__label--require">手机验证码</span>
            </label>
            <div class="pull-left">
              <input type="text" name="mobileVerifyCode" id="mobileVerifyCode" class="form-control">
            </div>
            <div class="form-group__addon">
              <button class="btn btn-primary btn-block">获取验证码</button>
            </div>
          </div>
          <div class="form-group">
            <label for="pass" class="control-label">
              <span class="form__label form__label--require">密码</span>
            </label>
            <div class="overflow-hidden">
              <input type="password" name="pass" id="pass" class="form-control" placeholder="密码6-16位，需包含数字、英文、符号两种">
            </div>
          </div>
          <div class="form-group">
            <label for="repeatPass" class="control-label">
              <span class="form__label form__label--require">重复密码</span>
            </label>
            <div class="overflow-hidden">
              <input type="password" name="repeatPass" id="repeatPass" class="form-control" placeholder="请再次输入">
            </div>
          </div>
          <div class="form-group">
            <label for="tradePass" class="control-label">
              <span class="form__label form__label--require">交易密码</span>
            </label>
            <div class="overflow-hidden">
              <input type="password" name="tradePass" id="tradePass" class="form-control" placeholder="密码6-16位，需包含数字、英文、符号两种">
            </div>
          </div>
          <div class="form-group">
            <label for="repeatTradePass" class="control-label">
              <span class="form__label form__label--require">重复交易密码</span>
            </label>
            <div class="overflow-hidden">
              <input type="password" name="repeatTradePass" id="repeatTradePass" class="form-control" placeholder="请再次输入">
            </div>
          </div>
          <div class="form-group">
            <div class="form-group__single checkbox">
              <label>
                <input type="checkbox" name="source" id="source">
                我已阅读并同意<a href="#">《用户注册协议》</a>
              </label>
            </div>
          </div>
          <div class="form-group registration__complete">
            <div class="form-group__single">
              <button type="submit" class="btn btn-block btn-primary">完成注册</button>
            </div>
          </div>
        </form>
      </div>
    </div>

  </div>

  <div class="modal fade modal-exemplar J_exemplar" id="exemplar" tabindex="-1" role="dialog" aria-labelledby="">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">示例图</h4>
        </div>
        <div class="modal-body">
          <div class="exemplar__image">
            <img src="" class="J_example">
          </div>
        </div>
      </div>
    </div>
  </div>

  <%- include src/pages/common/footer.html -%>
  <%- include src/pages/common/scripts.html -%>

</body>
</html>